<template>
  <a-card>
    <div style="display: flex;justify-content: space-between;">
      <h2>操作日志</h2>
      <a-button type="danger" @click="allClear">全部清空</a-button>
    </div>
    <a-divider/>
    <a-spin :spinning="loading">
      <a-table :columns="columns" :data-source="list"
               :pagination="pagination"
               :row-key="record => record._id"
               borderd
               @change="handleTableChange">
        <template #createAt="{ record }">
          {{ formatDate(record.meta.createAt) }}
        </template>
        <template #operation="{ record }">
        <span>
          <a-popconfirm title="确定要删除吗?" @confirm="handleDelete(record)">
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </span>
        </template>
      </a-table>
    </a-spin>
  </a-card>
</template>

<script>
import { Button, Card, Divider, message, Popconfirm, Spin, Table } from 'ant-design-vue'
import { computed, onMounted, ref } from 'vue'
import { deleteAll, fetchLogList, remove } from '@/api/log'
import { formatDate } from '@/utils'
import { getLogByPath } from '@/utils/log'

const columns = [
  {
    title: '用户名',
    dataIndex: 'user.account',
    key: 'account',
  },
  {
    title: '动作',
    dataIndex: 'action',
    key: 'action',
  },
  {
    title: '创建时间',
    slots: {
      customRender: 'createAt',
    },
    key: 'createAt',
  },
  {
    title: '操作',
    key: 'operation',
    slots: {
      customRender: 'operation',
    },
  },
]

export default {
  name: 'index',
  components: {
    ACard: Card,
    ADivider: Divider,
    ATable: Table,
    APopconfirm: Popconfirm,
    AButton: Button,
    ASpin: Spin,
  },
  setup () {
    const loading = ref(true)
    const list = ref([])
    const currentPage = ref(1)
    const size = ref(10)
    const total = ref(0)
    const pagination = computed(() => ({
        total: total.value,
        current: currentPage.value,
        pageSize: size.value,
      }),
    )
    const getList = async () => {
      await fetchLogList(currentPage.value, size.value).then(res => {
        res.data.list.forEach(item => {
          item.action = getLogByPath(item.request.url)
        })
        list.value = res.data.list
        total.value = res.data.total
        loading.value = false
      })
    }
    onMounted(() => {
        getList()
      },
    )
    const handleDelete = (record) => {
      const index = list.value.findIndex(element => element._id === record._id)
      remove(record._id).then(res => message.success(res.msg))
      list.value.splice(index, 1)
    }
    const handleTableChange = async ({ current, pageSize }) => {
      loading.value = true
      currentPage.value = current
      size.value = pageSize
      await getList()
      loading.value = false
    }
    const allClear = () => {
      deleteAll().then(res => {
          message.success(res.msg)
          getList()
        },
      )
    }

    return {
      pagination,
      columns,
      list,
      loading,
      handleDelete,
      handleTableChange,
      allClear,
      formatDate,
    }
  },
}
</script>

<style scoped>

</style>
